<template>
	<view class="all">
		<view class="top">
			<uni-icons class="fanhui" color=white type="arrowleft" size="25" @click="back"></uni-icons>
			<view class="biaoti">消息中心</view>
		</view>
		<view class="quyu">
			<view class="xiaogezi1" @click="dianzan">
				<image :src="require('../../static/message-box/pictures/zan.png')" class="img">
					<view class="wenzi">点赞</view>
			</view>
			<view class="xiaogezi2" @click="pinglun">
				<image :src="require('../../static/message-box/pictures/comment.png')" class="img">
					<view class="wenzi">评论</view>
			</view>
			<view class="xiaogezi3" @click="shoucang">
				<image :src="require('../../static/message-box/pictures/collect.png')" class="img">
					<view class="wenzi">收藏</view>
			</view>
			<view class="xiaogezi4" @click="fensi">
				<image :src="require('../../static/message-box/pictures/fans.png')" class="img">
					<view class="wenzi">粉丝</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="xinxiquyu" show-scrollbar='false'>
			<view class="message_box">
				<image :src="require('../../static/message-box/pictures/aiqiu.jpg')" class="pic"></image>
				<view class="wenben">
				<text class="mingcheng">爱囚</text>
				<view class="message">有兴趣一起去看油画展吗？</view>
				<view class="time">12-18</view>
				<view class="hongdian">1</view>
				</view>
			</view>
			<view class="message_box">
				<image :src="require('../../static/message-box/pictures/beihai.jpg')" class="pic"></image>
				<view class="wenben">
				<text class="mingcheng">北海</text>
				<view class="message">我发现我跟你都同在王羲之小组中！</view>
				<view class="time">11-20</view>
				<view class="hongdian">2</view>
				</view>
			</view>
			<view class="message_box">
				<image :src="require('../../static/message-box/pictures/danmo.jpg')" class="pic"></image>
				<view class="wenben">
				<text class="mingcheng">淡墨</text>
				<view class="message">你好啊！</view>
				<view class="time">11-9</view>
				<view class="hongdian">1</view>
				</view>
			</view>
			<view class="message_box">
				<image :src="require('../../static/message-box/pictures/guichu.jpg')" class="pic"></image>
				<view class="wenben">
				<text class="mingcheng">归处</text>
				<view class="message">什么时候一起出去看戏剧吗？</view>
				<view class="time">11-9</view>
				<view class="hongdian">3</view>
				</view>
			</view>
			<view class="message_box">
				<image :src="require('../../static/message-box/pictures/kujiu.jpg')" class="pic"></image>
				<view class="wenben">
				<text class="mingcheng">苦酒</text>
				<view class="message">最近在干啥呢？</view>
				<view class="time">10-28</view>
				<view class="hongdian">1</view>
				</view>
			</view>
			<view class="message_box">
				<image :src="require('../../static/message-box/pictures/ling.jpg')" class="pic"></image>
				<view class="wenben">
				<text class="mingcheng">玲</text>
				<view class="message">一起啊！</view>
				<view class="time">10-11</view>
				</view>
			</view>
			<view class="message_box">
				<image :src="require('../../static/message-box/pictures/huaibao.jpg')" class="pic"></image>
				<view class="wenben">
				<text class="mingcheng">怀抱</text>
				<view class="message">最近没空诶</view>
				<view class="time">10-1</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
			dianzan() {
				uni.navigateTo({
					url: './dianzan'
				})
			},
			pinglun() {
				uni.navigateTo({
					url: './pinglun'
				})
			},
			shoucang() {
				uni.navigateTo({
					url: './shoucang'
				})
			},
			fensi() {
				uni.navigateTo({
					url: './fensi'
				})
			},
			back()
			{
				uni.navigateBack({})
			}
		}
	}
</script>

<style scoped>
	.all {
		width: 100vw;
		height: 100vh;
	}

	.top {
		height: 10vh;
		width: 100vw;
		background-color: #c0e9ff;
		position: relative;
	}

	.fanhui {
		position: relative;
		top: 90rpx;
		left: 30rpx;
	}

	.biaoti {
		font-size: 35rpx;
		color: white;
		position: relative;
		top: 40rpx;
		left: 40vw;
	}

	.quyu {
		width: 100vw;
		height: 18vh;
		text-align: center;
		background-color: #f4f4f4;
	}
	
	.img {
		margin-top: 2.5vh;
		width: 90rpx;
		height: 90rpx;
		position: relative;
	}
	
	.wenzi {
		font-size: 38rpx;
		position: relative;
		top:1vh;
	}

	.xiaogezi1 {
		width: 20vw;
		height: 14vh;
		background-color: white;
		border-radius: 20rpx;
		border: 1px solid white;
		position: relative;
		left: 4vw;
		top: 2vh;
	}

	.xiaogezi2 {
		width: 20vw;
		height: 14vh;
		background-color: white;
		border-radius: 20rpx;
		border: 1px solid white;
		position: relative;
		left: 28vw;
		top: -12vh;
	}

	.xiaogezi3 {
		width: 20vw;
		height: 14vh;
		background-color: white;
		border-radius: 20rpx;
		border: 1px solid white;
		position: relative;
		left: 52vw;
		top: -26vh;
	}

	.xiaogezi4 {
		width: 20vw;
		height: 14vh;
		background-color: white;
		border-radius: 20rpx;
		border: 1px solid white;
		position: relative;
		left: 76vw;
		top: -40vh;
	}

	.message_box {
		width: 100vw;
		height: 11vh;
	}

	.pic {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: relative;
		left: 40rpx;
		top:40rpx;
	}
	.xinxiquyu
	{
		width: 100vw;
		height: 72vh;
	}
	.wenben
	{
		width: 68vw;
		height: 11vh;
		position: relative;
		left:26vw;
		top:-7.9vh;
		border-bottom: 1rpx solid #dcdcdc;
	}
	.mingcheng
	{
		color: #797979;
		font-size: 38rpx;
		font-weight: bold;
		position: relative;
		top:2.5vh;
	}
	.message
	{
		color: #797979;
		font-size: 30rpx;
		position: relative;
		top:3.5vh;
	}
	.time
	{
		color: #797979;
		font-size: 25rpx;
		position: relative;
		float: right;
		top:-2.5vh;
	}
	.hongdian
	{
		height:40rpx;
		width: 40rpx;
		border-radius: 50%;
		color: white;
		background-color: red;
		display: flex;
		justify-content: center;
		position: relative;
		left: 62vw;
		top:1vh;
	}
</style>
